panelMenu: Don't fade appMenuButton icon and put it on the side

Design request, don't fade the icon of the appMenuButton and put it on
the side instead of overlaping with the text.

https://bugzilla.gnome.org/show_bug.cgi?id=744680

diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index c88b5c7c0c4ea7ed08f1b598bc9d504e9b738fb0..43bd225d5bedb71aa0ebac3df00f08ba9f1ead8b 100644 (file)
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -283,17 +283,6 @@ StScrollBar {
     color: #ccc;
     transition-duration: 100ms;
 
-    #appMenuIcon { 
-      app-icon-bottom-clip: 1px;
-      
-      .panel-button:active &, 
-      .panel-button:overview &, 
-      .panel-button:focus &, 
-      .panel-button:checked & {
-        app-icon-bottom-clip: 2px;
-      }
-        
-    }
     &:hover { 
       color: lighten($fg_color, 10%);
       text-shadow: black 0 2px 2px;

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index dc25e84295a86ffe96c4b65a794a75c25a0ff4db..14b2e4c4ed78347079b12f823f81050eaa82a195 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1215,10 +1215,6 @@ StScrollBar {
     font-weight: bold;
     color: #ccc;
     transition-duration: 100ms; }
-    #panel .panel-button #appMenuIcon {
-      app-icon-bottom-clip: 1px; }
-      .panel-button:active #panel .panel-button #appMenuIcon, .panel-button:overview #panel .panel-button #appMenuIcon, .panel-button:focus #panel .panel-button #appMenuIcon, .panel-button:checked #panel .panel-button #appMenuIcon {
-        app-icon-bottom-clip: 2px; }
     #panel .panel-button:hover {
       color: white;
       text-shadow: black 0 2px 2px; }

diff --git a/js/ui/panel.js b/js/ui/panel.js
index 87930aa645b9866d51997bcf93e6f1ff22a26c66..13b091a65220591641038de5060d7680a9ad0608 100644 (file)
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -26,6 +26,7 @@ const Main = imports.ui.main;
 const Tweener = imports.ui.tweener;
 
 const PANEL_ICON_SIZE = 24;
+const APP_MENU_ICON_MARGIN = 2;
 
 const BUTTON_DND_ACTIVATION_TIMEOUT = 250;
 
@@ -190,33 +191,21 @@ const AppMenuButton = new Lang.Class({
         this.actor.bind_property("reactive", this.actor, "can-focus", 0);
         this.actor.reactive = false;
 
-        this._container = new Shell.GenericContainer();
+        this._container = new St.BoxLayout({ style_class: 'panel-status-menu-box' });
         bin.set_child(this._container);
-        this._container.connect('get-preferred-width', Lang.bind(this, this._getContentPreferredWidth));
-        this._container.connect('get-preferred-height', Lang.bind(this, this._getContentPreferredHeight));
-        this._container.connect('allocate', Lang.bind(this, this._contentAllocate));
 
         let textureCache = St.TextureCache.get_default();
         textureCache.connect('icon-theme-changed',
                              Lang.bind(this, this._onIconThemeChanged));
 
-        this._iconBox = new Shell.Slicer({ name: 'appMenuIcon' });
-        this._iconBox.connect('style-changed',
-                              Lang.bind(this, this._onIconBoxStyleChanged));
-        this._iconBox.connect('notify::allocation',
-                              Lang.bind(this, this._updateIconBoxClip));
+        this._iconBox = new St.Bin();
         this._container.add_actor(this._iconBox);
 
-        this._hbox = new St.BoxLayout({ style_class: 'panel-status-menu-box' });
-        this._container.add_actor(this._hbox);
-
         this._label = new TextShadower();
         this._label.actor.y_align = Clutter.ActorAlign.CENTER;
-        this._hbox.add_actor(this._label.actor);
+        this._container.add_actor(this._label.actor);
         this._arrow = PopupMenu.arrowIcon(St.Side.BOTTOM);
-        this._hbox.add_actor(this._arrow);
-
-        this._iconBottomClip = 0;
+        this._container.add_actor(this._arrow);
 
         this._visible = !Main.overview.visible;
         if (!this._visible)
@@ -278,21 +267,15 @@ const AppMenuButton = new Lang.Class({
             return;
         this._spinnerIcon = icon;
         this._spinner = new Animation.AnimatedIcon(this._spinnerIcon, PANEL_ICON_SIZE);
-        this._hbox.add_actor(this._spinner.actor);
+        this._container.add_actor(this._spinner.actor);
         this._spinner.actor.hide();
     },
 
-    _onIconBoxStyleChanged: function() {
-        let node = this._iconBox.get_theme_node();
-        this._iconBottomClip = node.get_length('app-icon-bottom-clip');
-        this._updateIconBoxClip();
-    },
-
     _syncIcon: function() {
         if (!this._targetApp)
             return;
 
-        let icon = this._targetApp.get_faded_icon(2 * PANEL_ICON_SIZE, this._iconBox.text_direction);
+        let icon = this._targetApp.create_icon_texture(PANEL_ICON_SIZE - APP_MENU_ICON_MARGIN);
         this._iconBox.set_child(icon);
     },
 
@@ -303,16 +286,6 @@ const AppMenuButton = new Lang.Class({
         this._syncIcon();
     },
 
-    _updateIconBoxClip: function() {
-        let allocation = this._iconBox.allocation;
-        if (this._iconBottomClip > 0)
-            this._iconBox.set_clip(0, 0,
-                                   allocation.x2 - allocation.x1,
-                                   allocation.y2 - allocation.y1 - this._iconBottomClip);
-        else
-            this._iconBox.remove_clip();
-    },
-
     stopAnimation: function() {
         if (this._stop)
             return;
@@ -345,64 +318,6 @@ const AppMenuButton = new Lang.Class({
         this._spinner.actor.show();
     },
 
-    _getContentPreferredWidth: function(actor, forHeight, alloc) {
-        let [minSize, naturalSize] = this._iconBox.get_preferred_width(forHeight);
-        alloc.min_size = minSize;
-        alloc.natural_size = naturalSize;
-        [minSize, naturalSize] = this._hbox.get_preferred_width(forHeight);
-        alloc.min_size = alloc.min_size + Math.max(0, minSize - Math.floor(alloc.min_size / 2));
-        alloc.natural_size = alloc.natural_size + Math.max(0, naturalSize - Math.floor(alloc.natural_size / 2));
-    },
-
-    _getContentPreferredHeight: function(actor, forWidth, alloc) {
-        let [minSize, naturalSize] = this._iconBox.get_preferred_height(forWidth);
-        alloc.min_size = minSize;
-        alloc.natural_size = naturalSize;
-        [minSize, naturalSize] = this._hbox.get_preferred_height(forWidth);
-        if (minSize > alloc.min_size)
-            alloc.min_size = minSize;
-        if (naturalSize > alloc.natural_size)
-            alloc.natural_size = naturalSize;
-    },
-
-    _contentAllocate: function(actor, box, flags) {
-        let allocWidth = box.x2 - box.x1;
-        let allocHeight = box.y2 - box.y1;
-        let childBox = new Clutter.ActorBox();
-
-        let [minWidth, minHeight, naturalWidth, naturalHeight] = this._iconBox.get_preferred_size();
-
-        let direction = this.actor.get_text_direction();
-
-        let yPadding = Math.floor(Math.max(0, allocHeight - naturalHeight) / 2);
-        childBox.y1 = yPadding;
-        childBox.y2 = childBox.y1 + Math.min(naturalHeight, allocHeight);
-        if (direction == Clutter.TextDirection.LTR) {
-            childBox.x1 = 0;
-            childBox.x2 = childBox.x1 + Math.min(naturalWidth, allocWidth);
-        } else {
-            childBox.x1 = Math.max(0, allocWidth - naturalWidth);
-            childBox.x2 = allocWidth;
-        }
-        this._iconBox.allocate(childBox, flags);
-
-        let iconWidth = childBox.x2 - childBox.x1;
-
-        [minWidth, naturalWidth] = this._hbox.get_preferred_width(-1);
-
-        childBox.y1 = 0;
-        childBox.y2 = allocHeight;
-
-        if (direction == Clutter.TextDirection.LTR) {
-            childBox.x1 = Math.floor(iconWidth / 2);
-            childBox.x2 = Math.min(childBox.x1 + naturalWidth, allocWidth);
-        } else {
-            childBox.x2 = allocWidth - Math.floor(iconWidth / 2);
-            childBox.x1 = Math.max(0, childBox.x2 - naturalWidth);
-        }
-        this._hbox.allocate(childBox, flags);
-    },
-
     _onAppStateChanged: function(appSys, app) {
         let state = app.state;
         if (state != Shell.AppState.STARTING) {